// 网页加载事件
window.onload = function(){
	// 获取标签
	var account = document.querySelector(".account")
	var goods = document.querySelector(".goods")
	var price = document.querySelector(".price")
	var num = document.querySelector(".num")
	var total = document.querySelector(".total")
	var btn = document.querySelector(".btn")
	
	// 用户输入账号时，清空之前的输入
	// 用户重新选中了输入框--- 修改
	account.onfocus = function(){
		// 表单标签是通过value属性操作值的
		// 直接设置为空字符串 ， 来代表删除
		account.value = ""
	}
	
	// 选择商品时，显示价格
	// 下拉菜单 只能使用onchange
	// 普通输入框 onchange oninput 都能用
	goods.onchange = function(){
		// 获取选的商品数据
		var goodsv = goods.value
		// 判断是哪一种商品，设置对应的价格
		if(goodsv=="请选择"){
			price.value = "0.00"
		}else if(goodsv=="瓜子"){
			price.value = "8.00"
		}else if(goodsv=="香烟"){
			price.value = "15.00"
		}else{
			price.value = "10.00"
		}
	}
	
	// 输入数量时，显示总价
	// onchange : 内容更改 + 失去焦点
	// oninput ： 每一次内容改变 ，都会触发
	// 我们的代码写的简单，相信你的用户是善良的，只会输入数字
	num.onfocus = function(){
		num.value = ""
	}
	num.oninput = function(){
		// 获取单价  数量   乘法
		// 从页面中获取的数据都是字符串
		var pricev = price.value //"8.00
		var numv = num.value  //"12"
		
		// 只有数字才能数学运算
		// 数学运算时，有隐式转换
		// "8.00" * "12"  --- number() --- 8 * 12  -- 96
		var totalv =  pricev * numv
		// 将数组转换为字符串，设置两位小数
		total.value =  totalv.toFixed(2)
		
	}
	
	
	// 点击确认，弹出确认信息
	
	btn.onclick = function(){
		var accountv = account.value;
		var totalv = total.value
		if(accountv==""){
			alert("请输入用户名")
		}else if(totalv=="0.00"){
			alert("你没有购买商品")
		}else{
			alert(`${accountv}购买了${totalv}￥的商品`)
		}
		// alert("account.value购买了total.value￥的商品")
		// alert(account.value + "购买了" + total.value+ "￥的商品")
		// 反引号 字符串中使用 ${}来调用变量
		// alert(`${account.value}购买了${total.value}￥的商品`)
	}
}